<template>
    <div>
        <div class="page_head">
            <h1>板块管理</h1>
            <span>板块名称</span>
            <input type="text"></input>
            <Button type="primary" id="search">查询</Button>
            <Button type="primary" id="search_all">查询所有</Button>
        </div>
        <Table :columns="plateCol" :data="plates.records">

        </Table>
        <Row class="plate_choose">
            <Col>
                <Page @on-change="changePlate" @on-page-size-change="changeplateSize" :total="plates.total"
                      :current="plates.current" :page-size="plates.size"
                      show-sizer show-elevator/>
            </Col>
        </Row>
        <div>
<!--            <Button @click="value4 = true" type="primary" id="second_button">查看板块内容</Button>-->
            <Drawer :closable="false" width="940" v-model="showpage">
                <div id="pages">
                    <Table border ref="selection" :columns="pageCol" :data="pages.records">
                        <template slot-scope="{ row, index }" slot="action">
                            <Button type="error" size="small" @click="remove_page(index)">删除此帖</Button>
                        </template>
                    </Table>
                    <Button @click="handleSelectAll(true)">全部选择</Button>
                    <Button @click="handleSelectAll(false)">取消全选</Button>
                    <Button @click="remove_allpage(index)">全部删除</Button>
                </div>
            </Drawer>
        </div>
    </div>
</template>
<script>
    import {mapActions, mapGetters} from 'vuex'

    export default {
        data () {
            var value = false;
            return {
                showpage: false,
                plates: {},
                categoryCache: new Map(),
                pages: {},
                title: null,
                pStyle: {
                    fontSize: '16px',
                    color: 'rgba(0,0,0,0.85)',
                    lineHeight: '24px',
                    display: 'block',
                    marginBottom: '16px'
                },
                plateCol: [
                    {
                        title: '名称',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '所属分区',
                        key: 'category'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 300,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.showpage = true;
                                            this.getPages(params.index);
                                        }
                                    }
                                }, '所有帖子'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除板块')
                            ]);
                        }
                    }
                ],
                pageCol: [{
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                    {
                        title: '标题',
                        width: 120,
                        key: 'user'
                    },
                    {
                        title: '内容',
                        key: 'content'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
            }
        },
        methods: {
            ...mapActions('adminPlate',["getAllPlate"],["deletePlate"]),
            ...mapActions('adminPage',["getAllPage"],["deletePage"]),
            ...mapActions('adminCategory',["getAllCategory","getCategory"]),
            remove (index) {
                this.deletePlate({
                    id: this.plates.records[index].id,
                    callback: success => {
                        if (success) {
                            this.plates.records.splice(index, 1);
                            this.$Message.success("删除成功");
                        } else
                            this.$Message.error("删除失败");
                    }
                })
            },
            remove_page(index) {
                this.deletePage({
                    id: this.Pages.records[index].id,
                    callback: success => {
                        if (success) {
                            this.Pages.records.splice(index, 1);
                            this.$Message.success("删除成功");
                        } else
                            this.$Message.error("删除失败");
                    }
                })
            },
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            remove_allpage(index) {
                this.deletePage({
                    id: this.Pages.records[index].id,
                    callback: success => {
                        this.Pages.records.splice(index, 1);
                    }
                })
            },
            changePlate: function (page) {
                this.getPages(page, this.pages.size)
            },
            changeplateSize: function (size) {
            },
            getPages: function (index, page = 1, size = 10) {
                this.getPages({
                    categoryId: this.categories.records[index].id,
                    page, size,
                    callback: ps => {
                        this.paltes = ps.paltes;
                        let stack = [];
                        this.paltes.records.forEach(p => {
                            stack.push(p);
                        })

                        this.setUser(stack);
                    }
                })
            },
            getPlate: function (page = 1, size = 10,) {
                this.getAllPlate({
                    page,size,
                    callback: plates => {
                        this.plates = plates.plates;
                        let categoryStack = [];
                        this.plates.records.forEach(x => {
                            categoryStack.push(x);
                        })
                        this.setCategory( categoryStack);
                    }
                });
            },
            setCategory(stack) {
                let categoryCache = this.categoryCache
                let data = stack.pop();
                if (!data) {
                    return;
                }
                if (categoryCache.get(data.categoryId)) {
                    this.$set(data, 'category', categoryCache.get(data.categoryId).name);
                    this.setCategory(stack);
                    return;
                }

                this.getCategory({
                    id: data.categoryId,
                    callback: p => {
                        categoryCache.set(p.category.id, p.category);
                        this.$set(data, 'category', p.category.name);
                        this.setCategory(stack);
                    }
                });
            },

        },
        created: function () {
            this.getPlate();

        },
    }

</script>
<style>
    .demo-drawer-profile{
        font-size: 14px;
    }
    .demo-drawer-profile .ivu-col{
        margin-bottom: 12px;
    }
    .page_head{
        margin-bottom: 20px;
    }
    .page_head span{
        font-size: 14px;
    }
    .page_head input{
        height: 36px;
        width: 400px;
        margin: 0 20px;
        border:1px solid #000000;
        font-size: 18px;
        text-indent: 1em;
        border-radius: 6px;
        outline: unset;
    }
    .page_head button{
        margin: 0 2px;
    }
    #pages button{
        margin: 0 5px;
    }
    #pages button:nth-child(2),#pages button:nth-child(3),#pages button:nth-child(4){
        margin-top: 10px;
    }
</style>
